import { HTMLProps } from "react";
import { clsxm } from "../helpers";
import { LoadingBarRotateFade } from "../icons";

type ButtonProps = HTMLProps<HTMLButtonElement> & {
  loading?: boolean;
  type?: "button" | "reset" | "submit";
};

export function Button(props: ButtonProps) {
  const { children, className, loading, disabled, ...rest } = props;
  return (
    <button
      className={clsxm(
        "relative inline-flex cursor-pointer items-center gap-x-1 rounded border-none bg-blue-500 bg-none px-4 py-1 text-sm text-white",
        className,
        disabled
          ? "cursor-not-allowed overflow-hidden after:absolute after:inset-0 after:bg-white/30 after:content-['']"
          : "shadow-[0_0_0_0] shadow-transparent transition-all duration-200 focus:bg-blue-500/90 focus:shadow-[0_0_0_4px] focus:shadow-sky-300",
      )}
      disabled={disabled}
      {...rest}
    >
      {loading && <LoadingBarRotateFade />}
      <span>{children}</span>
    </button>
  );
}
